<template>
  <div id="max">
    <div style="position: absolute;top: 0;left: 0;width: 96%;z-index: -100;">
      <vue-particles
          :clickEffect="true"
          :hoverEffect="true"
          :lineLinked="true"
          :lineOpacity="0.7"
          :linesDistance="150"
          :linesWidth="1"
          :moveSpeed="3"
          :particleOpacity="0.7"
          :particleSize="4"
          :particlesNumber="80"
          clickMode="push"
          color="#dedede"
          hoverMode="grab"
          linesColor="#dedede"
          shapeType="circle"
      >
      </vue-particles>
    </div>
    <el-card id="card">
      <div id="Login">
        <el-form ref="formLabelAlign" :model="formLabelAlign" :rules="rules" class="demo-ruleForm" status-icon>
          <el-form-item>
            <h1 class="title1">注册</h1>
          </el-form-item>
          <div class="title2">已有账号，
            <router-link to="/login">
              <el-button type="text">去登录</el-button>
            </router-link>
          </div>
          <el-form-item prop="userName">
            <el-input
                v-model="formLabelAlign.userName"
                maxlength="20"
                placeholder="昵称"
                prefix-icon="el-icon-user"
                show-word-limit
                type="text">
            </el-input>
          </el-form-item>
          <el-form-item prop="userPhone">
            <el-input
                v-model="formLabelAlign.userPhone"
                placeholder="手机号码"
                prefix-icon="el-icon-phone-outline">
            </el-input>
          </el-form-item>
          <el-form-item class="formnum" prop="code">
            <el-input
                v-model="formLabelAlign.code"
                class="input"
                placeholder="验证码"
                prefix-icon="el-icon-lock">
            </el-input>
            <el-button :disabled="isDisabled" class="input1" type="primary" @click="sendMsg">{{buttonName}}</el-button>
          </el-form-item>

          <el-form-item prop="userPassword">
            <el-input
                v-model="formLabelAlign.userPassword"
                placeholder="密码"
                prefix-icon="el-icon-lock"
                type="password">
            </el-input>
          </el-form-item>

          <el-form-item prop="userPassword1">
            <el-input
                v-model="formLabelAlign.userPassword1"
                placeholder="请再次输入密码"
                prefix-icon="el-icon-lock"
                type="password">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="Register('formLabelAlign')">立即注册</el-button>
          </el-form-item>

        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "Register",
  data() {
    return {
      formLabelAlign: {
        code: '',
        userName: '',
        userPassword: '',
        userPassword1: '',
        userPhone: '',
      },
      checked: false,
      buttonName: "发送验证码",
      isDisabled: false,
      time: 60,
      rules: {
        userPassword: [{required: true, message: '请设置密码', trigger: 'blur'}],
        userName: [{required: true, message: '为方便社区交流，请输入唯一昵称', trigger: 'blur'}],
        userPassword1: [{required: true, message: '请再次输入密码', trigger: 'blur'}],
        userPhone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '手机号为11位', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}],
      },
    }
  },
  methods: {
    Register(res) {
      this.$refs[res].validate((valid) => {
        if (valid) {
          if (this.formLabelAlign.userPassword !== this.formLabelAlign.userPassword1) {
            this.$notify.error({
              title: '错误',
              message: '你输入二次密码不正确！请重试。'
            });
          } else {
            this.$axios.post("/user/register", this.formLabelAlign).then((res) => {
              if (res.data.success) {
                this.$router.push('/login');
                ElMessage.success({
                  message: '注册成功,请登录',
                  type: 'success'
                });
              } else {
                ElMessage.error(res.data.message);
              }
            })
          }
        }
      })

    },
    sendMsg() {
      this.$axios.post("/user/verification", this.formLabelAlign).then((res) => {
        if (res.data.success) {
          let me = this;
          me.isDisabled = true;
          let interval = window.setInterval(function () {
            me.buttonName = me.time;
            --me.time;
            if (me.time < 0) {
              me.buttonName = "重新发送";
              me.time = 10;
              me.isDisabled = false;
              window.clearInterval(interval);
            }
          }, 1000);
        }
      })

    }

  },
}
</script>

<style scoped>

#card {
  text-align: center;
  margin: 9% auto;
  width: 40%;
}

#Login {
  margin: 0 auto;
  width: 50%;
  position: relative;
  animation: register 400ms ease-out;
}

@keyframes register {
  from {
    right: 300px;
  }
  to {
    right: 0;
  }
}

.title1 {
  width: 50px;
  font-size: 24px;
  font-weight: bold;
}

.title2 {
  width: 130px;
}

.input {
  width: 60%;
}

.input1 {
  width: 40%;
}

.formnum {
  width: 100%;
}
</style>